<!-- author: xuett -->
<!-- date: 2025-03-14 08:56:38 -->
<!-- description: 登录页 -->
<template>
  <div class="login-container">
    <div class="login-header">
      <div class="title-cn">智慧文旅游客综合服务系统</div>
    </div>
    <div class="login-content">
      <!-- 登录表单 -->
      <div class="right-form">
        <div class="form-login">
          <div class="form-title">
            重置密码
          </div>
          <div class="form-content">
            <el-form ref="loginRef" label-position="top" :rules="rules" :model="loginForm" class="login-form">
             <div style="height: 300px">
               <el-form-item label="" prop="phone">
                 <el-input v-model.trim="loginForm.phone" placeholder="请输入账号" type="text" autocomplete="off" @keyup.enter="login">
                   <template #prefix>
                     <img class="user-icon" src="@/assets/images/login/user.png" alt="" />
                   </template>
                 </el-input>
               </el-form-item>
               <el-form-item label="" prop="password">
                 <el-input v-model.trim="loginForm.password" placeholder="请输入密码" type="password" autocomplete="off" >
                   <template #prefix>
                     <img class="password-icon" src="@/assets/images/login/password.png" alt="" />
                   </template>
                 </el-input>
               </el-form-item>
               <el-form-item label="" prop="confirmPassword" class="last-form">
                 <el-input v-model.trim="loginForm.confirmPassword" placeholder="请再次确认密码" type="password" autocomplete="off" >
                   <template #prefix>
                     <img class="password-icon" src="@/assets/images/login/password.png" alt="" />
                   </template>
                 </el-input>
               </el-form-item>
               <!-- 记住/忘记密码 -->
               <div class="pwd-tip">
                 <div class="tip-left">
                 </div>
                 <div class="tip-right-group">
                   <div class="tip-right" @click="register">返回账号登录</div>
                 </div>
               </div>
             </div>
              <el-form-item>
                <div class="btn-box" @click="editor">
                  <div class="login-btn">
                    确定
                  </div>
                </div>

                <!--                <el-button class="login-btn" type="primary" :loading="loading" @click="login">登录</el-button>-->
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useSystemStore } from "@/store/system";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import { Encrypt, Decrypt } from "@/utils/crypto.js";
import api from "@/service/container";
import {useTouristHomepageStore} from "@/store/touristHomepage";
import {MENU_TYPE, PREDICT_STATUS} from "@/utils/consts";

const $systemStore = useSystemStore();
const $router = useRouter();

const loginRef = ref();
const state = reactive({
  storageName: "trbm-loginForm",
  loginForm: {
    phone: process.env.NODE_ENV === "development" ? "15535186299" : "",
    password: process.env.NODE_ENV === "development" ? "" : "",
    confirmPassword: process.env.NODE_ENV === "development" ? "" : "",
  },
  isVerifyPass: false,
  rememberMe: false,
  loading: false
});
const { loginForm, isVerifyPass, rememberMe, loading } = toRefs(state);

//表单校验
const rules = reactive({
  phone:  [
    {
      required: true,
      message: "请输入手机号码",
      trigger: "blur"
    },
    {
      pattern: /^1[3456789]\d{9}$/,
      message: "请输入正确的手机号码",
      trigger: "blur"
    }
  ],
  password: [{ required: "true", message: "请输入密码", trigger: "blur" }],
  confirmPassword: [
      { required: "true", message: "请再次输入密码", trigger: "blur" },
    {
      validator: (rule, value, callback) => {
        if (value !== loginForm.value.password) {
          callback(new Error("两次输入密码不一致",value,  loginForm.password));
        } else {
          callback();
        }
      },
      trigger: "blur"
    }

  ]
});

onMounted(() => {
  if (localStorage.getItem(state.storageName)) {
    // getStorage();
  }
});

//登录
const login = () => {
  loginRef.value.validate((valid) => {
    if (valid) {
      $router.push({ name: "editorPassWord" });

    } else {
      return false;
    }
  });
};
// 修改密码
const editor = () => {
  loginRef.value.validate((valid) => {
    if (valid) {
      let params = {
        phone:  state.loginForm.phone,
        password: state.loginForm.password,
        confirmPassword: state.loginForm.confirmPassword
      };
      api.forgetPassword(params).then((res) => {
        if (res.code == 200) {
         //   返回登录页面
         $router.push({ name: "login" });

        }
        state.loading = false;
      });
    } else {
      return false;
    }
  });
}
// 注册
const register = () => {
  $router.push({ name: "login" });
};
//获取验证码
const captcha = () => {
};
//重置表单
const resetForm = () => {
  loginRef.value.resetFields();
};

//记住密码
const rememberPassword = () => {
  // 勾选记住密码, 存储在 locaLStorage 中
  if (state.rememberMe) {
    //检测是否记住密码
    const item = {
      username: state.loginForm.username,
      password: Encrypt(state.loginForm.password),
      rememberMe: state.rememberMe
    };
    localStorage.setItem(state.storageName, JSON.stringify(item));
  } else {
    // 否则移除
    localStorage.removeItem(state.storageName);
  }
};

//获取存储的密码
const getStorage = () => {
  let loginForm = JSON.parse(localStorage.getItem(state.storageName));
  state.loginForm = {
    username: loginForm.username == undefined ? state.loginForm.username : loginForm.username,
    password: loginForm.password == undefined ? state.loginForm.password : Decrypt(loginForm.password)
  };
  state.loginForm.password = state.loginForm.password.trim();

  state.rememberMe = loginForm.rememberMe == undefined ? false : Boolean(loginForm.rememberMe);
};


</script>

<style scoped lang="scss">
.login-container {
  width: 100%;
  height: 100%;
  background-image: url("@/assets/images/login/login_bg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  // background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .login-header {
    text-align: center;
    width: 1200px;
    height: 140px;
    background: linear-gradient( 90deg, rgba(241,231,218,0) 0%, rgba(179,115,62,0.4) 50%, rgba(241,231,218,0) 100%);
    border-radius: 0px 0px 0px 0px;
    line-height: 140px;
    .title-cn {
      font-family: DingliesongtypefaceRegular;

      font-weight: 400;
      font-size: 50px;
      color: #9B6548;
      //text-shadow: 0px 2px 2px #F0E5DA;
      text-align: center;
      font-style: normal;
      text-transform: none;
    }
  }
  .login-content {
    width: 480px;
    height: 510px;
    box-sizing: border-box;
    margin: 60px 0 109px;
    .right-form {
      width: 100%;
      height: 100%;
      background-image: url("@/assets/images/login/login_bg_back.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      //width: calc(100% - 690px);
      padding-top: 27px;
      .form-login{
        padding: 0 30px;
        .form-title {
          height: 41px;
          font-family: DingliesongtypefaceRegular;
          font-weight: 400;
          font-size: 32px;
          color: #9B6548;
          line-height: 41px;
          letter-spacing: 2px;
          text-align: center;
          span {
            font-weight: bold;
            font-size: 26px;
            color: #ffffff;
            text-shadow: 0px 0px 5px rgba(35, 128, 224, 0.58);
          }
        }
        .form-content {
          margin-top: 32px;
          :deep(.el-input) {
            height: 52px;
            margin-bottom: 24px;
          }
          :deep(.el-form-item) {
            margin-bottom: 0px !important;
          }
          :deep(.el-input__wrapper) {
            padding: 0 0;
            background: rgba(255, 255, 255, 0.5);
            border-radius: 4px 4px 4px 4px;
          }
          :deep(.el-input__inner) {
            width: calc(100% - 2px);
            height: calc(100% - 2px);
            // font-family: Alibaba PuHuiTi-Regular;
            font-size: 20px;
            color: #000;
          }
          :deep(.el-input__prefix) {
            width: 60px;
          }
          :deep(.el-input__prefix-inner) {
            width: 100%;
          }
          :deep(.el-input__prefix-inner > :last-child) {
            margin-right: 0;
          }
          :deep(input::placeholder) {
            font-family: Alibaba PuHuiTi-Regular;
            font-size: 20px;
            color: rgba(0, 0, 0, 0.5);
            line-height: 23px;
            text-align: left;
          }
          :deep(.el-form-item__error) {
            margin-top: -20px;
          }
          .user-icon,
          .password-icon {
            display: block;
            width: 24px;
            height: 24px;
          }
          .pwd-tip {
            width: 100%;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            :deep(.el-checkbox__label) {
              font-family: DingliesongtypefaceRegular;
              font-size: 14px;
              color: #9B6548;
              line-height: 20px;
            }
            .tip-right-group{
              display: flex;
            }
            .tip-right {
              font-family: DingliesongtypefaceRegular;
              font-size: 14px;
              color: #9B6548;
              line-height: 32px;
              cursor: pointer;
            }
          }
          .btn-box{
            width: 100%;
            height: 36px;
            border-radius: 0px 0px 0px 0px;
            display: flex;
            justify-content: center;
            .login-btn {
              cursor: pointer;
              background-image: url("@/assets/images/login/login_btn.png");
              background-repeat: no-repeat;
              background-size: 100% 100%;
              width: 186px;
              height: 52px;
              border-radius: 4px 4px 4px 4px;
              font-family: DingliesongtypefaceRegular;
              font-size: 24px;
              letter-spacing: 5px;
              color: #FFFFFF;
              line-height: 52px;
              text-align: center;
              &:hover {
                background-image: url("@/assets/images/login/login_btn_highlight.png");
                background-repeat: no-repeat;
                background-size: 100% 100%;
                width: 186px;
                height: 63px;
                border-radius: 4px 4px 4px 4px;
                font-family: DingliesongtypefaceRegular;
                font-size: 24px;
                letter-spacing: 5px;
                color: #FFFFFF;
                line-height:52px;
                text-align: center;
              }
            }
          }

        }
      }

    }
  }
  .login-footer {
    text-align: center;
    font-family: Alibaba PuHuiTi-Regular;
    font-size: 20px;
    color: #7884a7;
    line-height: 23px;
    text-align: center;
  }
}
</style>
